<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更改密码</title>


    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}">
    <script th:src="@{/js/layui.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/vue.min.js}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>


</head>
<body>

<div id="container" class="layui-fluid" style="margin-top: 30px">
    <form id="form">
        <div class="layui-row">
            <div class="layui-row layui-col-space3">
                <div class="layui-col-md1 layui-col-xs1">
                    <label style="float: right;font-size: 16px;margin-top: 6px">密码:</label>
                </div>
                <div class="layui-col-md10 layui-col-xs10" style="margin-left: 10px">
                    <input class="layui-input" type="text" v-model="pass">
                    <!--          <input hidden type="password" name="password" v-model="password">-->
                    <!--          <input hidden type="text" name="_method" value="put">-->
                    <!--          <input hidden type="text" name="id" v-model="id">-->
                </div>
                <div class="layui-row" style="margin-top: 15px;">
                    <div class="layui-col-md-offset3 layui-col-md-offset3"
                         style="margin-top: 15px;padding-left: 380px;">
                        <button class="layui-btn layui-btn-normal layui-btn-radius" type="button" @click="click">提交
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

</body>


<script th:inline="javascript">
    var v = new Vue({
        el: '#container',
        data: {
            password: '',
            id: [[${session.user.id}]],
            pass: ''
        },
        methods: {
            click: function () {
                var pattern = /^[0-9A-Za-z]{8,12}$/;
                if (!pattern.test(this.pass)) {

                    var str = "请填写正确密码!密码格式为8-12位数字+字母!";
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }

                this.password = md5(this.pass);

                var data = new FormData();
                data.append("password", this.password);
                data.append("id", this.id);
                data.append("_method", "put");


                axios({
                    url: 'http://localhost:8080/user/up',
                    method: 'post',
                    data: data
                }).then((response) => {
                    console.log(response.data)
                    var str = "修改成功!"
                    layer.alert(str, {
                        time: 3000
                    })
                })


            }
        },
        mounted: function () {

        }
    })
</script>
</html>
